<template>
  <div>
    <table border="1px solid #eee">
      <thead>
        <tr>
          <th>姓名</th>
          <th>地址</th>
          <th>标识</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in data" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.address }}</td>
          <!-- <td :style="{ color: item.tag === '家' ? 'red' : 'purple' }">
            {{ item.tag }}
          </td> -->
          <td>
            <!-- 默认插槽 -->
            <!-- 这里传值看上去也是prop，但是跟父组件传值给子组件不太一样 -->
            <!-- 此刻，这个插槽它的作用有两个，一个是占位等着将来被替换，另外一个是传值给父组件 -->
            <!-- <slot :row="item">{{ item.tag }}</slot> -->

            <!-- 具名的作用域插槽 -->
            <slot name="xxx" :row="item">{{ item.tag }}</slot>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'MyTable',
  //   props: ['data'] // 完全不用考虑类型和是否必须
  props: {
    // data是接收时候的属性名，Array是类型
    // data: Array,

    // 下面这种开发中用得多
    data: {
      // 类型
      type: Array,
      // 是否必须
      //   required: true
      // 默认值（数字和字符串直接写，但是如果是对象或是数组，必须写成函数）
      default: () => {
        return []
      }
    }
  }
}
</script>
